<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>sql执行接口 - adhoc</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <script type="text/javascript" src="js/plugin/jquery.min.js"></script>
    <script type="text/javascript" src="js/plugin/fullscreen.js"></script>
    <script type="text/javascript" src="js/plugin/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="js/plugin/echarts/charts.js"></script>
    <script type="text/javascript" src="js/plugin/tablesorter/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="js/apiTest.js"></script>
    <script type="text/javascript" src="js/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/plugin/bootstrap-3.3.5/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="js/plugin/bootstrap-3.3.5/js/defaults-zh_CN.min.js"></script>
    <script type="text/javascript" src="js/plugin/jsonview-v1.2.0/dist/jquery.jsonview.js"></script>
    <script type="text/javascript" src="js/plugin/echarts/charts.js"></script>
    <script type="text/javascript" src="js/sybn_bootstrap.js"></script>
    <script type="text/javascript" src="js/sybn_common.js"></script>
    <script type="text/javascript" src="js/sybn_desc_table.js"></script>
    <script type="text/javascript" src="js/plugin/sql/codemirror.js"></script>
    <script type="text/javascript" src="js/plugin/sql/matchbrackets.js"></script>
    <script type="text/javascript" src="js/plugin/sql/sql.js"></script>
    <script type="text/javascript" src="js/plugin/sql/show-hint.js"></script>
    <script type="text/javascript" src="js/plugin/sql/sql-hint3.js"></script>
    <script type="text/javascript" src="js/plugin/sql/sql-hint-sybn.js"></script>
    <script type="text/javascript" src="js/plugin/gzip/pako.min.js"></script>
    <script type="text/javascript" src="js/plugin/gzip/base64_gzip.js"></script>
    <script type="text/javascript" src="js/sybn_demo_sql.js"></script>
    <script type="text/javascript" src="js/plugin/clipboard/clipboard.min.js"></script>
    <link rel="stylesheet" href="css/fontawesome-4.2.0_ie7/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="js/plugin/bootstrap-3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="js/plugin/bootstrap-3.3.5/css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="js/plugin/jsonview-v1.2.0/dist/jquery.jsonview.css" />
    <link rel="stylesheet" href="js/plugin/tablesorter/theme.default.min.css" />
    <link rel="stylesheet" href="css/plugin/sql/codemirror.css" />
    <link rel="stylesheet" href="css/plugin/sql/show-hint.css" />
    <link rel="stylesheet" href="css/bootstrap_sybn_custom.css" />
    <link rel="stylesheet" href="css/api_test.css" />
    <style>
        .form-control.CodeMirror{height:95px; width:100%;}
        .sql_input_big .form-control.CodeMirror{height: 500px}
        .sql_input_big .iframe_preview {max-height: 400px;}
        .sql_input_big2 .form-control.CodeMirror{height: 800px}
        .sql_input_big2 .iframe_preview {max-height: 500px;}
        .btn-group-xs .btn.common_use_select {padding: 0px 5px; font-size: 10px; line-height: 1.0;}
        .common_use {margin-right: 10px;}
    </style>
</head>
<body>

<div class="tab-content">

    <div class="panel panel-primary sybn-api-demo">
         <div class="panel-heading text-primary btn-group-xs">
             <span class="p_title">查询接口 - 输入sql后在点击右侧的查询按钮</span>

             <span class="common_use floatRight">常用sql:
             <select class="btn btn-default common_use_select" title="常用sql" onchange="setSqlFun(this)">
                 <option value="">请选择</option>
                 <option value="select * from x">select * from x</option>
                 <option value="show tables">show tables</option>
                 <option value="show databases">show databases</option>
             </select>
             </span>
         </div>

        <div class="panel-body sybn-api-demo collapse in floatRight sybn_contextmenu">

        <div class="input-group input-group-xs sql_textarea_parent">
            <textarea name="sql" class="sql_textarea" style="margin-top:5px;display: block!important;">SELECT * FROM cinema_info limit 10</textarea>
            <span class="btn-group-vertical input-group-addon btn-group-xs padding0">
                <span class="btn btn-default sqlApi submit">查询数据</span>
                <span class="btn btn-default sqlApi submit selection">查询选中</span>
                <span class="btn btn-default sqlApi excel submit">导出xls</span>
                <span class="btn btn-default sqlApi csv submit">导出csv</span>
            </span>
        </div>

        </div>
    </div>


    <div style="display: none;">
        <table summary="" id="defaultsTemplate" class="tableTemplate tablesorter tablesorter-default" style="display: none;">
            <thead class="thTemplate">
                <tr class="info textCenter"><th scope="col" style="display: none;"> </th></tr>
            </thead>
            <tbody class="trTemplate">
                <tr class="tinfo phrase_tr" data-id="#{id}"> </tr>
            </tbody>
        </table>
    </div>
    <div class="contextmenu contextmenu_div" id="sub-menu">
        <ul class="list-group">
            <li class="list-group-item">
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="=">等于此值</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="!=">不等于此值</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op=">">大于</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="<">小于</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="in">in</a>
                <a class="copy_btn btn btn-default btn-xs sql_append" data-field="${field}" data-type="${type}" data-value="${type}" data-op="like">like</a>
            </li>
            <li class="list-group-item"><a id="btn_copy_field" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#copy_field">复制字段</a> <span>:</span> <span id="copy_field">${field}</span></li>
            <li class="list-group-item"><a id="btn_copy_type"  class="copy_btn btn btn-default btn-xs" data-clipboard-target="#copy_type">复制类型</a> <span>:</span> <span id="copy_type">${type}</span></li>
            <li class="list-group-item"><a id="btn_copy_value" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#copy_value">复制数值</a> <span>:</span> <textarea id="copy_value" class="copy_textarea">${value}</textarea></li>
        </ul>
    </div>
    <div class="contextmenu contextmenu_div" id="title-menu">
        <ul class="list-group">
            <li class="list-group-item"><a id="title_btn_copy_field" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#title_copy_field">复制字段</a>: <span id="title_copy_field">${field}</span></li>
            <li class="list-group-item"><a id="title_btn_copy_value" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#title_copy_value">复制总和</a>: <span id="title_copy_value" class="sybn_ellipsis" style="max-width:100px;">${value}</span></li>
            <li class="list-group-item"><a id="title_btn_copy_col" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#title_copy_col">复制整列</a>: <textarea id="title_copy_col" class="copy_textarea">${calVal}</textarea></li>
            <li class="list-group-item"><a id="title_btn_copy_all_field" class="copy_btn btn btn-default btn-xs" data-clipboard-target="#title_copy_all_field">复制所有字段名</a>: <textarea id="title_copy_all_field" class="copy_textarea">${title_copy_all_field}</textarea></li>
        </ul>
    </div>
</div>
</body>
<script>
// SQL语句高亮
window.onload = function() {

    // 初始化sql编辑器
    initSqlEditor({});
    // 初始化sql编辑器的代码提示
    initSqlEditorByApi("api/bean/table_info.json?is_subset=true&_res_type=mini");

    $('.CodeMirror').addClass("form-control");

    $('body').on('click', '.sqlApi', function(e) {

            // 主接口地址
        var api = $(this).data("api") || "api/sql/select_v2";
            // 附加参数
        var apiParam = $(this).data("param") || "";

        var _this = this;
        var $this = $(this);
        var $input_group = $this.closest(".input-group, .sybn-api-demo");
        var $panel_body = $this.closest(".sybn-api-demo");
        if ($panel_body.length == 0){
            $panel_body = $this.closest(".input-group");
        }
        var sql_editor = window[$input_group.find('[name=sql]').data("editor")];
        var sql = $(this).hasClass("selection") && sql_editor.getSelection() ? sql_editor.getSelection() : sql_editor.getValue();

        // 替换地址栏的url, 方便复制
        var url2 = window.location.href.toString()
        url2 = removeURLPar(url2, "sql_demo");
        url2 = removeURLPar(url2, "sql");
        url2 = changeURLPar(url2, "zip", zip(sql));
        window.history.pushState({},0,url2);

        var statusKey = "select_v2_" + new Date().getTime() + "_" + hashCode(sql)
        $input_group.find(".interrupt").show();
        $input_group.data("statusKey", statusKey);

        var dbsource = getQueryString("dbsource");
        if (dbsource){
                apiParam = "&dbsource=" + dbsource + apiParam
        }
        if($(this).hasClass("excel")){
                window.open(api + ".xls?sql="+encodeURIComponent(sql) + "&statusKey=" + statusKey + apiParam);
        } else if($(this).hasClass("csv")){
                window.open(api + ".csv?sql="+encodeURIComponent(sql) + "&statusKey=" + statusKey + apiParam);
        } else if($this.hasClass("char")){
            // 载入图表
            var view = getViewParam($panel_body);
            var url = api + ".json?sql="+encodeURIComponent(sql) + "&statusKey=" + statusKey + "&_result_view=" + view + apiParam;
            $panel_body.find(".char_view").append("<div class='chars_preview clear_both' id='container' style='height:300px;width:100%'></div>");
            var chartsType = $panel_body.find('[name=result_view_charts_type]').val()
            showCharts(url, $panel_body.find( ".chars_preview"), chartsType);
        } else {
            // 载入表格
            $panel_body.find(".iframe_preview").remove();
            $panel_body.find(".json_view").remove();
            openApi(_this, e, api + ".json?preview=true&sql="+encodeURIComponent(sql) + "&statusKey=" + statusKey + apiParam)
        }

    });
    $(".view_param").empty().append($(".view_param_1").clone().children());

    var sql = getQueryString("sql");
    var sqlZip = getQueryString("zip");
    if (sqlZip) {
        sql=unzip(sqlZip);
    }
    if (sql) {
        var sql_editor = window[$('[name=sql]').data("editor")];
        if (sql_editor) {
            sql_editor.setValue(sql);
            $(".sqlApi.submit").click();
        }
    }

    var sql_demo = getQueryString("sql_demo");
    if (sql_demo && getSybnDemoSql) {
        sql = getSybnDemoSql()[sql_demo];
        var sql_editor = window[$('[name=sql]').data("editor")];
                if (sql_editor) {
                    sql_editor.setValue(sql);
                    $(".sqlApi.submit.sybn_progress-bar").click();
            }
    }

    var panel_type = getQueryString("panel_type");
    if (panel_type == 'xs') {
        $("body").addClass("panel_type_xs")
    }
};

// 设置sql
var setSqlFun = function(t) {
        var setSql;
        if (typeof t != 'string' && t.value != undefined) {
             setSql = t.value;
        }
        if (!setSql) {
            return;
        }
        var $input_group = $(t).closest(".input-group, .sybn-api-demo")
        var sql_editor = window[$input_group.find('[name=url],[name=sql]').data("editor")];
        if (sql_editor) {
                sql_editor.setValue(setSql);
        }
}
</script>
</html>
